<template>
	<view>
		<uni-nav-bar :fixed="true" shadow left-icon="left" title="订单详情"  status-bar @clickLeft="back" :border="false"/>
		<view class="orderInfo">
			<view class="first">
				<view class="first-info" >
					订单{{order.status | formatStatus}}
				</view>
				<view class="" v-if="order.status == 1" style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 10rpx;">
					<text style="font-size: 28rpx; color: #666;">支付剩余时间</text>
					<uni-countdown :font-size="18" :show-day="false" :show-hour="false" :minute="minute" :second="second" />
				</view>
				
				<view class="" v-if="order.status == 6" style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 10rpx;">
					<text style="font-size: 28rpx; color: #666;display: block;">取消原因</text>
					<text style="font-size: 32rpx; color: #333; margin-top: 10rpx;">{{order.cancelReason}}</text>
				</view>
				
				<view class="" v-if="order.status == 7" style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 10rpx;">
					<text style="font-size: 28rpx; color: #666;display: block;">退款原因</text>
					<text style="font-size: 32rpx; color: #333; margin-top: 10rpx;">{{order.rejectionReason}}</text>
				</view>
				
				<view class="" style="display: flex;justify-content: center; align-items: center;">
					<button v-if="order.status == 5 || order.status == 6" @click="repition(order)" style="background-color: white; width: 200rpx;font-size: 28rpx;color: #333333;margin-top: 20rpx;">再来一单</button>
					<button v-if="order.status == 1" @click="pay(order)" style="background-color: white; width: 200rpx;font-size: 28rpx;margin-top: 20rpx;color: #3CB7FF; border: solid 2rpx #3CB7FF;">去支付</button>
					<button v-if="order.status == 2 || order.status == 3" @click="reminder()" style="background-color: white; width: 200rpx;font-size: 28rpx;color: #333333;margin-top: 20rpx;">催单</button>
					<button v-if="order.status != 1 && order.status != 6 && order.status != 7" @click="rejection(order)" type="warn" :plain="true" style=" width: 200rpx;font-size: 28rpx;margin-top: 20rpx;">退款</button>
				</view>

			</view>
			
			<view class="second">
				<text style="font-size: 28rpx; color: #333; font-weight: 500;">{{storeName}}</text>
				<u-line length="98%" margin="28rpx 10rpx 28rpx 10rpx"></u-line>
				<view v-for="(item,index) in order.orderDetailList" :key="index" class="products">
					<view class="product">
						<img :src="item.image" alt="" style="height: 150rpx;width: 150rpx;border-radius: 10rpx;"/>
						<view class="" style="font-size: 28rpx; color: #333;margin: 20rpx;">
							<view class="">{{item.name}}</view>
							<view class="" style="font-size: 26rpx;color: #666;margin-top: 15rpx;">x{{item.number}}</view>
						</view>
					</view>
					<view class="price" style="font-weight: 600; margin: 20rpx;">
						￥{{item.amount}}
					</view>
				</view>
				<view class="" style="margin: 20rpx;font-size: 26rpx; color: #333;display: flex; justify-content: space-between;">
					<view class="">配送费</view>
					<view class="" style="font-weight: 600;">
						￥{{delivery}}
					</view>
				</view>
				<u-line length="98%" margin="28rpx 10rpx 28rpx 10rpx"></u-line>
				<view class="" style="font-size: 28rpx; color: #333;display: flex;justify-content: flex-end;">
					合计 <text style="font-weight: 600;margin-right: 20rpx; margin-left: 20rpx;">￥{{order.amount + 6}}</text> 
				</view>
			</view>
			
			<view class="third">
				<uni-icons type="phone-filled" size="30"></uni-icons>
				<text style="margin-left: 15rpx; line-height: 100%;">联系商家</text>
			</view>
			
			<view class="fourth">
				<view class="" style="margin: 25rpx;">
					期望时间 <text style="color: #333; margin-left: 30rpx; font-weight: 500;">{{order.estimatedDeliveryTime}}</text>
				</view>
				<view class="" style="margin: 25rpx; display: flex;">
					<view>配送地址</view>
					<view class="" style="color: #333; margin-left: 30rpx; display: inline-block;">
						<view>{{order.consignee}} {{order.phone}} <br>{{order.address}}</view>
					</view>
				</view>
			</view>
			
			<view class="fifth">
				<view class="" style="margin: 25rpx;">
					订单号码 <text style="color: #333;margin-left: 30rpx; ">{{order.number}}</text>
				</view>
				<view class="" style="margin: 25rpx;">
					订单时间 <text style="color: #333;margin-left: 30rpx; ">{{order.orderTime}}</text>
				</view>
				<view class="" style="margin: 25rpx;">
					支付方式 <text style="color: #333;margin-left: 30rpx; ">{{order.payMethod == 0 ? '微信':'其他'}}</text>
				</view>
			</view>
			
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose"  mode="input" title="退款理由" value=" "
					placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import {orderDetailByOrderNumber,reminder,repetition,rejection} from '@/api/order.js'
	export default {
		data() {
			return {
				storeName:this.$store.getters.storeInfo.name,
				delivery:6,
				order:{
					status:0,
					amount:99,
					estimatedDeliveryTime:'2024-5-11 17:35:15',
					number:'8888888888',
					orderTime:'2024-5-11 17:41:06',
					payMethod: 0,
					address: "灵田镇桂林电子科技大学花江校区",
					consignee: "荧",
					phone:'15977226401',
					orderDetailList:[
						{
							image:'https://web-kotori.oss-cn-beijing.aliyuncs.com/dbf76c48-964a-4ddb-a58b-389eb81a1378.jpg',
							name:'日复一日',
							amount:72,
							number:1
							
						},
						{
							image:'https://web-kotori.oss-cn-beijing.aliyuncs.com/dbf76c48-964a-4ddb-a58b-389eb81a1378.jpg',
							name:'日复一日',
							amount:72,
							number:1
						},
						{
							image:'https://web-kotori.oss-cn-beijing.aliyuncs.com/dbf76c48-964a-4ddb-a58b-389eb81a1378.jpg',
							name:'日复一日',
							amount:72,
							number:1
						},
						{
							image:'https://web-kotori.oss-cn-beijing.aliyuncs.com/dbf76c48-964a-4ddb-a58b-389eb81a1378.jpg',
							name:'日复一日',
							amount:72,
							number:1
						},
					]
				},
			minute:15,
			second:0
			}

		},
		onLoad(option){
			console.log(option)
			if(option.orderNumber != null){
				orderDetailByOrderNumber(option.orderNumber).then(res=>{
					this.order = res.data
				}).catch(err=>{
					uni.showToast({
						title:err
					})
				})
			}else{
				this.order = JSON.parse(decodeURIComponent(option.order))
				if(this.order.status == 1){
					let timestamp = Date.parse(new Date(this.order.orderTime).toString());
					const nowTime = Date.parse(new Date())
					const Timeout = timestamp + 15*60*1000
					const newTime = (Timeout - nowTime)/1000
					
					this.second = newTime%60
					this.minute = parseInt(newTime/60)
					console.log('this.second',this.second)
					console.log('this.minute',this.minute)	
				}
			}



		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			repition(){
				uni.navigateTo({
					url:'/pages/home/home'
				})
			},
			reminder(){
				// reminder()
				uni.showToast({
					title:'催单成功！',
					icon:'success'
				})
			},
			repetition(item){
				// console.log(item)
				repetition(item.id).then(res=>{
					uni.navigateTo({
						url:'/pages/home/home'
					})
				}).catch(err=>{
					uni.showToast({
						title:err
					})
				})
			},
			rejection(item){
				this.rejectionConfig = {
					id : item.id,
					rejectionReason : ''
				}
				this.$refs.inputDialog.open()
			
			},
			dialogInputConfirm(val) {
				this.rejectionConfig.rejectionReason = val
				console.log(this.rejectionConfig)
				rejection(this.rejectionConfig).then(res=>{
					
					this.$refs.inputDialog.close()
					uni.showToast({
						title:'退款成功！'
					})
					orderDetailByOrderNumber(this.order.number).then(res=>{
						this.order = res.data
					}).catch(err=>{
						uni.showToast({
							title:err
						})
					})
				}).catch(err=>{
					uni.showToast({
						title:err
					})
				})
				
			},
			pay(e){
				const orderVO = {
					orderNumber:e.number,
					orderAmount:e.amount + 6,
					orderTime:e.orderTime,
				}
				uni.navigateTo({
					url:"/pages/pay/pay?orderVO=" + encodeURIComponent(JSON.stringify(orderVO))
				})
			},
		}
	}
</script>

<style>
.first, .second, .third, .fourth, .fifth{
	width: 89%;
	margin-left: 20rpx;
	border-radius: 15rpx;
	background-color: #fff;
	margin-top: 25rpx;
	padding: 22rpx;
}

.first{
	/* height: 180rpx; */
}

.second{
	
}

.third{
	text-align: center;
	font-weight: 600;
	color: #666;
	font-size: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	
}

.fourth{
	color: #666;
}

.fifth{
	color: #666;
}

.first-info{
	font-weight: 600;
	font-size: 36rpx;
	color: #333333;
	text-align: center;
	margin-top: 20rpx;
}

.products{
	display: flex;
	justify-content: space-between;
	margin-top: 15rpx;
}

.product{
	display: flex;
	
}
</style>
